<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #nav{
            width: 100%;
            height: 0px;
            background-color: darkslategrey;
            padding-top:60px ;
        }
        #nav img{
            float: right;
            position: relative;
            top:-50px;
            right: 20px;
        }
        #nav_c{
            width: 100%;
            height: 280px;
            background-color: darkslategrey;
        }
        #nav_c ul{
            list-style: none;
        }
        #nav_c ul li{
            width: 100px;
            height: 35px;
            color: darkgrey;
        }
        #nav_c ul li:hover{
            color: aliceblue;
        }
    </style>
    <script src="../js/jquery-3.1.1.js"></script>
    <script>
        var temp=0;
        $(function(){
            $("#nav_c").hide();
            $("#bar").click(function(){
                if(temp==0){
                    $("#nav_c").slideDown("slow")
                    temp=1
                }
                else{
                    $("#nav_c").slideUp("slow")
                    temp=0
                }
            })
        })
    </script>
</head>
<body>
    <div id="nav">
        <img src="nav.png" id="bar">
        <div id="nav_c">
            <ul>
                <li>boostrap中文网</li>
                <li>boostrap2中文网</li>
                <li>boostrap3中文网</li>
                <li>boostrap4.0中文网</li>
                <li>预览</li>
                <li>教程</li>
                <li>API</li>
                <li>实例</li>
            </ul>
        </div>
    </div>

</body>
</html>